<template>
  <div class="box">
    <div class="title">
      <label for="title">标题：</label>
      <input type="text"
             v-model="$store.state.node.title">
    </div>
    <div class="dateNow">
      <label for="date">日期：</label>
      <input type="text"
             :value="currentDate | filtTime"
             @click="show = true"
             readonly="readonly" />

    </div>
    <div class="textMain">
      <div>内容：</div>
      <textarea v-model="$store.state.node.text"></textarea>
    </div>
    <van-popup v-model="show"
               position="bottom"
               :style="{ height: '50%' }"
               get-container="body">
      <van-datetime-picker v-model="currentDate"
                           type="datetime"
                           title="选择时间"
                           :min-date="minDate"
                           :max-date="maxDate"
                           :show-toolbar=false />
    </van-popup>
  </div>
</template>
<script>
import Moment from 'moment'
export default {
  filters: {
    filtTime (res) {
      return Moment(res).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 10, 1),
      currentDate: new Date(),
    }
  },
  methods: {
    showPopup () {
      this.show = true;
    },
  },
  mounted () {
    this.$store.commit("setDate", this.currentDate)
  },
  watch: {
    "currentDate": function () {
      this.$store.commit("setDate", this.currentDate)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
}
.title {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.dateNow {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.textMain {
  padding: 10px 0;
  flex: 8;
  display: flex;
  flex-direction: column;
  textarea {
    height: 100%;
  }
}
input {
  flex: 1;
}
input,
textarea {
  font-size: 16px;
  background: #fff9;
  border: none;
}
</style>